<template>
  <div class="list" v-cloak>
    <!-- <form action="/">
      <van-search
        v-model="value"
        show-action
        shape="round"
        autofocus
        action-text="返回"
        background="rgb(190, 153, 255)"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="goDetail('/goods', '')"
      />
    </form> -->
    <div>
      <div v-if="goods.length !== 0">
        <van-list
          class="goods-list"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="goods-list-item"
            v-for="(good, index) in goods"
            :key="index"
            @click="goDetail('/goods/goodsinfo', good.goods_id)"
          >
            <div class="img-box">
              <img v-lazy="good.goods_small_logo" />
            </div>
            <h3 class="title">
              {{ good.goods_name }}
            </h3>
            <div class="info">
              <p class="price">
                <span class="new">￥{{ good.goods_price }}</span>
              </p>
              <p class="sell">
                <span>热卖中</span>
                <span>剩余{{ good.goods_number }}件</span>
              </p>
            </div>
          </div>
        </van-list>
      </div>
      <div v-else>很抱歉!暂时没有你搜索的商品!</div>
    </div>
  </div>
</template>
<script>
import { getGoods } from '../../api/itemize'
export default {
  props: ['name'],
  data() {
    return {
      goods: [],
      page: 0,
      limit: 6,
      loading: false,
      finished: false,
      refreshing: false,
      count: 0
    }
  },
  created() {
    this.getGoods()
  },
  methods: {
    async getGoods() {
      ++this.page
      console.log(this.name, this.value)
      const res = await getGoods({ str: this.name || this.name, page: this.page, limit: this.limit })
      this.goods = this.goods.concat(res.data.message.goods)
      console.log(this.goods)
      this.goods.forEach(item => {
        if (item.goods_small_logo === '') {
          item.goods_small_logo = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013e3258ddb8c1a801219c77499b95.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638434283&t=4d02c4ab3958765ce49acb50c9bf580d'
        }
      })
      this.count = res.data.message.total
    },
    async onLoad() {
      setTimeout(async () => {
        await this.getGoods()
        this.loading = false
        console.log(this.count)
        if (this.goods.length >= this.count) {
          this.finished = true
        }
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
[v-cloak] {
  display: none;
}
.list {
  position: relative;
  top: -45px;
  height: 100%;
  padding-top: 40px;
  .goods-list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .goods-list-item {
      border-radius: 6px;
      width: 49%;
      border: 1px solid #ddd;
      padding: 10px 10px 0 10px;
      box-sizing: border-box;
      margin-bottom: 5px;
      background: #fff;
      .img-box {
        width: 149px;
        height: 149px;
        img {
          width: 100%;
        }
      }
      .title {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .info {
        font-size: 12px;
        .price {
          display: flex;
          justify-content: space-between;
          .new {
            color: red;
          }
        }
        .sell {
          display: flex;
          justify-content: space-between;
        }
      }
    }

    .van-list__error-text,
    .van-list__finished-text,
    .van-list__loading {
      width: 100%;
    }
  }
  .search_else {
    display: flex;
    flex-direction: column;
    align-content: center;
  }
  .list_item {
    padding: 5px;
    font-size: 12px;
    .s_title {
      display: block;
      max-width: 100%;
      overflow: hidden;
      padding-right: 10px;
      padding-bottom: 10px;
      float: left;
      a {
        height: 23px;
        line-height: 46px;
        border-radius: 3px;
        width: 100%;
        color: #686868;
        background-color: #e0eee5;
        padding: 5px;
        box-sizing: border-box;
      }
    }
    h2 {
      font-size: 14px;
    }
  }
  .goodsfind_list {
    height: 353px;
  }
}
</style>